<template>
<my-navigation-bar>视频</my-navigation-bar> 
<text class="icon-zuojiantou navbar" @tap="goBack" :style="flag?{marginTop: '38rpx'}:''"></text>
<view v-if="flag">
  <view class="container" :style="flag?{marginTop: '180rpx'}:''">
    <view class="video-box">
      <video src="https://fus.cdn.krcom.cn/000AUO4plx07tVzxjpSw0104120w9xW40E0c0.mp4?label=mp4_1080p&template=1920x1080.20.0&ori=0&ps=1A34GSngUJylzX&Expires=1679465665&ssig=P6dQDhVEkk&KID=unistore,video"></video>
    </view>
    <view class="desc">
      3分钟排睡|0-4月龄婴儿睡眠咨询师实录
    </view>
    
  </view>
</view>
 <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
  <scroll-view scroll-y="true" class="scroll-box">
    <view class="container" :style="flag?{marginTop: '180rpx'}:''">
      <view class="video-box">
        <video src="https://fus.cdn.krcom.cn/000AUO4plx07tVzxjpSw0104120w9xW40E0c0.mp4?label=mp4_1080p&template=1920x1080.20.0&ori=0&ps=1A34GSngUJylzX&Expires=1679465665&ssig=P6dQDhVEkk&KID=unistore,video"></video>
      </view>
      <view class="desc">
        3分钟排睡|0-4月龄婴儿睡眠咨询师实录
      </view>
    </view>
  </scroll-view>
</view>

</template>

<script setup> 
 import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
 import {computed} from "vue";
 import useBounceFunc from "../../hooks/bounce.js";
  const {state, moveH, startH, endH} = useBounceFunc();
 const flag = computed(()=>{
   return getApp().globalData.isIphoneX;
 })
 const goBack = () => {
   uni.navigateBack()
 }
</script>

<style lang="scss" scoped>
 .navbar {
    position: fixed;
    top: 63rpx;
    left: 30rpx;
    z-index: 100;
    font-size: 48rpx;
    font-weight: 500;
    color: #000;
  }
  .scroll-box{
    height: 100vh;
  }
.container{
  position: fixed;
  // background-color: #000;
  margin-top: 150rpx;
  width: 100vw;
  height: 100vh;
  .video-box{
    width: 100%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    video{
      width: 95%;
      height: 500rpx;
      
    }
  }
  .desc{
    background-color: #fff;
    padding: 50rpx 40rpx;
    color: #000;
    font-size: 35rpx;
    font-weight: 600;
  }
}
  
  
</style>
